<template>
  <common-dialog :dialog-title="`[${modelForm.formTitle}--${modelForm.code}]模型表单项配置`" :visible.sync="visible"
                 :before-close="handleBeforeClose" v-draggable
                  width="95%" custom-class="model-form-item-dialog">
    <template #body>
      <div class="model-form-item-table-data-container" >
        <common-border-table ref="tableData"
                             :table-data="tableData"
                             v-loading="loading"
                             :table-title="tableTitle"
                             :filter-info="filterInfo"
                             type="selection"
                             row-option-width="350px"
                             @selection-change="selectionChange"
                             @row-click="rowClick">
          <template #tableToolbar>
            <div class="table-toolbar">
              <el-button type="primary" icon="el-icon-plus" plain size="small" @click="addItems">移入</el-button>
              <el-button type="danger" icon="el-icon-minus" plain size="small" @click="deleteItems">移除</el-button>
            </div>
          </template>
          <template #icon="scope">
            <i :class="scope.row.icon" v-if="scope.row.iconType === 'element-ui' && scope.row.icon"></i>
          </template>
          <template #rowOption="scope">
            <el-button type="text" size="small" @click="openConfig(scope.row)">设置表单项</el-button>
            <el-button type="text" size="small" @click="swapRow(scope.row, 'top')" class="yellowgreen">置顶</el-button>
            <el-button type="text" size="small" @click="swapRow(scope.row, 'up')" class="green">上移</el-button>
            <el-button type="text" size="small" @click="swapRow(scope.row, 'down')" class="yellowgreen">下移</el-button>
            <el-button type="text" size="small" @click="swapRow(scope.row, 'bottom')" class="green">置底</el-button>
          </template>
        </common-border-table>
      </div>

      <select-model-attr :visible="showCreateForm" @removed="openAndCloseDialog" v-if="showCreateForm"
                         :model-id="modelForm.modelId" @getSelections="saveSelectedAttr"
                         :selected="getSelectedAttrCodes"></select-model-attr>

      <model-form-item-config :form-item-info="formItemInfo" @closed="hideConfig" v-if="showConfig"></model-form-item-config>
    </template>
  </common-dialog>
</template>

<script>

import CommonDialog from '@/components/common/CommonDialog'
import FormMixins from '@/components/mixins/form/FormMixins'
import ModelFormItemConfig from '@/components/model/ModelFormItemConfig'
import CommonBorderTable from '@/components/common/CommonBorderTable'
import TableDataMixins from '@/components/mixins/table/TableDataMixins'
import {tableTitle, filterInfo} from '@/js/model/selectAttrsTableConfig'
import {getModelFormItems, addModelFormItems, deleteItems, swapFormItem} from '@/js/api/model/modelFormItem'
import TableSelectionsMixins from '@/components/mixins/table/TableSelectionsMixins'
import SelectModelAttr from '@/components/model/SelectModelAttr'

export default {
  name: 'ModelFormItemInfo',
  components: {
    SelectModelAttr,
    CommonDialog,
    CommonBorderTable,
    ModelFormItemConfig
  },
  props: {
    modelForm: {
      type: Object
    }
  },
  mixins: [FormMixins, TableDataMixins, TableSelectionsMixins],
  data(){
    return {
      formItemInfo: undefined,
      showConfig: false
    }
  },
  methods: {
    openConfig(data){
      this.formItemInfo = data
      this.showConfig = true
    },
    hideConfig(){
      this.formItemInfo = undefined
      this.showConfig = false
    },
    async deleteItems(){
      if (this.selections.length < 1){
        this.$tips('请选择要删除的数据！', 'error')
        return
      }
      const ids = []
      this.selections.forEach(value => ids.push(value.id))
      this.$myConfirm('是否确定删除选中的数据？', async() => {
        const $loading = this.$appLoading('数据处理中，请稍后。。。', '.model-form-item-dialog')
        const response = await deleteItems(ids)
        if (response.errorMsg){
          this.$tips(response.errorMsg, 'error')
          return
        }
        $loading.close()
        this.$tips('删除成功！')
        await this.getModelFormItems()
      })
    },
    addItems(){
      this.showCreateForm = true
    },
    async getModelFormItems(){
      this.loading = true
      const tableData = await getModelFormItems(this.modelForm.id)
      if (tableData.errorMsg){
        this.$tips(tableData.errorMsg, 'error')
      } else {
        this.tableData = tableData.data
      }
      this.loading = false
    },
    async saveSelectedAttr(selections){
      const attrCodes = []
      selections.forEach(value => attrCodes.push(value.code))
      const $loading = this.$appLoading('数据处理中，请稍后。。。', '.model-form-item-dialog')
      const response = await addModelFormItems(this.modelForm.id, attrCodes)
      if (response.errorMsg){
        this.$tips(response.errorMsg, 'error')
      } else {
        this.$tips('数据添加成功')
        await this.getModelFormItems()
      }
      $loading.close()
    },
    async swapRow(data, flag){
      const $loading = this.$appLoading('数据处理中，请稍后。。。', '.model-form-item-dialog')
      const response = await swapFormItem(data.id, flag)
      $loading.close()
      if (response.errorMsg){
        this.$tips(response.errorMsg, 'error')
        return
      }
      this.$tips('顺序调整成功')
      await this.getModelFormItems()
    }
  },
  created(){
    this.initData(filterInfo, tableTitle)
    this.getModelFormItems()
  },
  computed: {
    getSelectedAttrCodes(){
      const ids = []
      for (const item of this.tableData) {
        ids.push(item.modelAttrCode)
      }
      return ids
    }
  }
}
</script>

<style lang="less">
  .model-form-item-dialog {
    .calcHeight(40px);
    overflow-y: hidden !important;

    .el-dialog__body {
      .calcHeight(54px);
      padding-bottom: 0;
      padding-top: 0;

      .model-form-item-table-data-container{
        height: 100%;
      }
    }
  }
</style>
